<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="wrap">
        <div class="button-groups">
            <button class="edit">替换</button>
        </div>
        <ul class="list">
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </ul>
    </div>
</body>
<script>

    // 如何克隆节点? (新的替换旧的)
    // Node.cloneNode(deep)   克隆节点
    // deep:  默认false  只克隆元素本身及其相关属性,至于子内容,并不克隆
    //        true       既克隆元素本身及其相关属性,又克隆子内容



    var edit = document.querySelector(".edit");
    var wrap = document.getElementsByClassName("wrap")[0];
    var ul = document.getElementsByClassName("list")[0];
    var mid = document.getElementsByClassName("mid")[0];

    // 需求:  克隆.list -> 放到.wrap中
    edit.onclick = function () {
        // 如何创建一个li

        var cloneUl = ul.cloneNode(true);
        console.log(cloneUl);

        wrap.appendChild(cloneUl);
    }



</script>

</html>